<docs>
  ## alert 历史搜索记录
</docs>
<template>
  <transition name="confirm">
    <div class="confirm" v-show="visible" @click="hide">
      <div class="container-wrap">
        <div class="container-search" @click.stop>
          <div class="searchBar">
            <input
              ref="searchId"
              v-model="qwgjz"
              @keyup.enter="search(qwgjz)"
              @focus="showWord = false"
              @blur="blurEven"/>
            <span
              class="searchIcon iconfont icon-search"
              @click="showWord = false"
              v-show="showWord">请输入您要查询的岗位、单位</span>
            <span class="backHide" @click="hide">取消</span>
          </div>
        </div>

        <div :class="`myjob ${List.lshx && List.lshx.length > 0?'':'PBottom'}`" @click.stop v-if="List.gwhx && List.gwhx.length > 0">
          <div class="title">推荐职位</div>
          <div class="jobContent">
            <span
              v-for="(item,i) in List.gwhx"
              :key="i"
              @click="search(item.gwmc)"
            >{{item.gwmc}}</span>
          </div>
        </div>
        <div class="history" @click.stop v-if="List.lshx && List.lshx.length > 0">
          <div class="title">历史搜索</div>
          <div class="hisContent">
            <p
              v-for="(item,i) in List.lshx"
              :key="i"
              @click="search(item.ssmc)">
              {{item.ssmc}}
              <img src="~common/images/close.png" @click.stop="delHistory(item.ssmc)" alt />
            </p>
          </div>
          <div class="hisFooter" @click="delHistory('')">清空历史记录</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: "history",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    List:{
      type: Object
    },
    qwgjz:{
      type: String
    },
  },
  data() {
    return {
      showWord: true,
      checked: false,
      jobList: [],
      historyList: []
    };
  },
  watch:{
    'visible':function (val) {
      if (val) {
        this.$nextTick(_=>{
          this.$refs.searchId.focus();
        })
        this.showWord = false;
      }
    },
    'qwgjz': function(val){
      this.showWord = val ? false : true;
    }
  },
  methods: {
    hide() {
      this.$emit("update:visible", false);
      this.showWord = true;
    },
    // 失焦事件
    blurEven(){
      this.showWord = this.qwgjz ? false : true;
    },
    // 删除记录
    delHistory(val){
      if (!val) {
        this.$confirm('是否删除全部历史记录？', '提示')
        .then(() => {
          this.GET_server(val)
        })
        .catch(() => {
          this.$toast('选择了取消');
        });
      } else {
        this.GET_server(val)
      }
    },
    // 删除请求
    GET_server(val){
      this.$loading = true;
      this.$http.post('/grgl/ssxxSc', {ssmc:val}).then(res => {
        const resData = res.returnData;
        this.$alert(resData.message, () => {
          const code = +resData.executeResult;
          if(code == 1){
            this.List.lshx = resData.zpxx.lshx;
          }
        });
      }).finally(() => {
        this.$loading = false;
      });
    },
    search(i){
      this.showWord = true;
      console.log(1111);

      this.$emit("search", '1', i);
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/var.scss";
.confirm {
  position: fixed;
  width: 100%;
  top: 122px;
  left: 0;
  height: 100%;
  z-index: 10;
  background: $color-cover-bg;
  &.confirm-enter-active {
    animation: cover-fadein 0.3s;
    .container {
      animation: content-zoom 0.3s;
    }
  }
  &.confirm-leave-to {
    opacity: 0;
  }
  &.confirm-leave-active {
    transition: all ease 0.3s;
  }
}
.container-search{
  height: 106px;
  background: linear-gradient(90deg, #1d66d4, #00baff);
  .searchBar {
    position: relative;
    width: 584px;
    font-size: $font-size-base;
    height: 66px;
    padding-left: 34px;
    margin-bottom: 20px;
    input {
      box-sizing: border-box;
      background-color: #fff;
      height: 100%;
      width: 100%;
      line-height: 66px;
      border-radius: $padding-base * 2;
      padding-left: $padding-base*2;
    }
    input::-webkit-input-placeholder {
      color: rgba(204, 204, 204, 1);
    }
    .searchIcon {
      position: absolute;
      color: #999;
      top: 0;
      left: 72px;
      height: 66px;
      line-height: 66px;
      font-size: 30px;
    }
    .icon-search:before {
      margin-right: 18px;
    }
    .backHide {
      position: absolute;
      right: -96px;
      top: 20px;
      color: #fff;
    }
  }
}
//弹框内容
.container-wrap {
  background-color: #fff;
  color: #333;
  font-size: 30px;
  .myjob {
    padding: 0 34px;
    .jobContent {
      padding: 22px 0;
      max-height: 170px;
      overflow: auto;
      span {
        display: inline-block;
        margin: 10px 20px 10px 0;
        height: 62px;
        line-height: 62px;
        background: #f0f1f5;
        padding: 0 10px;
        border: 1px solid #d7d8db;
        border-radius: 6px;
        color: #808080;
        box-sizing: border-box;
      }
    }
  }
  .PBottom{
    padding-bottom: 34px;
  }
  .history {
    padding: 0 34px;
    .hisContent {
      max-height: 236px;
      overflow: auto;
      p {
        height: 94px;
        line-height: 94px;
        border-bottom: 1px solid #d7d8db;
        box-sizing: border-box;
        color: #808080;
      }
      img {
        float: right;
        height: 34px;
        width: 34px;
        margin: 30px 15px 0 0;
      }
    }
    .hisFooter {
      text-align: center;
      color: #1d66d4;
      height: 94px;
      line-height: 94px;
    }
  }
  .title {
    height: 100px;
    line-height: 100px;
    color: #4d4d4d;
    font-weight: 500;
    font-size: 34px;
    border-bottom: 1px solid #dbdbdb;
    box-sizing: border-box;
  }
}
</style>
